<template>
  <ve-line
    :data="axisOption"
    :settings="chartSettings"
    ref="table"
    :events="chartPEvents"
  ></ve-line>
</template>
<script>
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },

  data() {
    this.chartSettings = {
      dimension: "支付日期",
      metrics: ["单价"],
      extraMetrics: ["供应商", "数量"],
    };
    const _this = this;
    // 饼图点击事件
    this.chartPEvents = {
      click: function (e) {
        _this.getNotChartData(e);
      },
    };

    return {
      // chartOptions: {
      //     series: [{
      //         type: 'line',
      //         // data: [1, 2, 3, 4, 5],
      //         lineStyle: {
      //             color: '#36a3f7'
      //         }
      //     }]
      // },
      // chartSettings: {
      //   // 0,0

      //   // yAxisType: ["0,0", '0.[00]a', '0.[00]%'],
      //   yAxisType: ["0.[00]", "0.[00]%"],
      //   // axisLabel: {
      //   //     formatter: function (value) {
      //   //         return value / 10000 + 'w';
      //   //     }
      //   //     // }
      //   // },
      //   axisSite: {
      //     right: [],
      //     // '下单率'
      //   },
      //   // yAxisName: ['数值轴']
      //   // yAxisName: ["数值轴", "比率轴"],
      // },
      axisOption: {
        // columns: ['日期', '访问用户', '下单用户', '下单率'],
        // rows: [
        //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        // ]
      },
    };
  },
  // computed: {
  //     axisOption() {
  //         return this.chartData
  //     }
  // },
  watch: {
    chartData: {
      handler: function (newnew, oldold) {
        // console.log(JSON.stringify(newnew));
        newnew.columns.forEach((item) => {
          this.axisOption = newnew;
          // if (item.includes("率")) {
          //   this.chartSettings.axisSite.right.push(item);
          //   // if (item.includes('连带率')) {
          //   //     this.chartSettings.axisSite.right = []
          //   //     this.axisOption = newnew

          //   // }
          // } else {
          //   this.chartSettings.axisSite.right = [];
          //   this.axisOption = newnew;
          //   // this.axisOption.columns = this.chartData.columns
          // }
        });

        // this.axisOption.rows = this.chartData.rows
        // this.initChart()
        // this.axisOption = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.table.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.axisOption = this.chartData;
    },
    getNotChartData(e) {
      console.log(e.name);
      this.$emit("vchartData", e.name);
    },
  },
};
</script>
